<template>
  <Layout>
    <Affix>
      <Header style="padding: 0">
        <Menu mode="horizontal" :theme="theme1" active-name="1">
          <MenuItem name="index">
            <div @click="index">
              <Icon type="ios-paper" />
              首页
            </div>
          </MenuItem>
          <MenuItem name="signin">
            <div @click="signIn">
              <Icon type="ios-paper" />
              登录
            </div>
          </MenuItem>
          <MenuItem name="userinfo">
            <div @click="userInfo">
              <Icon type="ios-paper" />
              个人信息
            </div>
          </MenuItem>
          <MenuItem name="4">
            <div @click="demo">
              <Icon type="ios-construct" />
              留言板
            </div>
          </MenuItem>
          <MenuItem style="float: right" name="5">
            <Input style="width: 300px"></Input>
            <Button>搜索</Button>
          </MenuItem>
        </Menu>
      </Header>
    </Affix>
    <!--    <div style="height: 60px"></div>-->
    <!--   中间部分路由-->
    <router-view></router-view>
    <Footer style="border: 1px silver solid">
      <!--  底部-->
      <Row>
        <Col id="fonter" span="24">
          <span>版权所有-违者必究</span>
        </Col>
      </Row>
    </Footer>
  </Layout>
</template>
<script>
  export default {
    data(){
      return {
        theme1:'light',
      }
    },
    methods:{
      // rout(e){
      //   this.$router.push(e)
      // },
      index(){
        this.$router.push({name:'index'})
      },
      signIn(){
        this.$router.push({name:'signin'})
      },
      userInfo(){
        this.$router.push({name:'userinfo'})
      },
      demo(){
        this.$router.push('/demo')
      },
    }
  }
</script>
<style lang="less">
  .demo-carousel>img {
    width: 100%;
  }
  #fonter {
    display: flex;
    justify-content: center;
  }
  .ivu-layout-sider-children {
    background-color: #fff;
  }
</style>
